<!--
 * @Date: 2023-10-12 13:10:47
 * @LastEditTime: 2023-10-12 17:10:30
 * 介绍:
-->
<route lang="json">
{
  "meta": {
    "title": "t('ying-xiao-ji-jing-shen-he')"
  }
}
</route>
<script lang="ts" setup>
import { fixedDecimals, omitText } from "@@/utils/tools/format";
import { ApiInsuredAppylList } from "@@/api/wk/list";
import dayjs from "dayjs";
import { getCountdown } from "@@/utils/tools/date";
import { useCurrentDate } from "@@/hooks/toolsHooks";
import { add, divide, multiply } from "mathjs";
import { apiApplyInsuredVote } from "@@/api/wk/index";
import router from "@@/router";
import { removeCache } from "@@/hooks/routeCache";

const route = useRoute();
const query: AnyObject = route.query;
const data: ApiInsuredAppylList.DataItem = JSON.parse(query.json);

const { currentDate } = useCurrentDate();

const countdown = computed(() => {
  const res = getCountdown(
    currentDate.value,
    dayjs(data.created_at).add(Number(data.end_time_hour), "h")
  );
  if (res.diffTime <= 0) return false;
  return `${res.H}:${res.m}:${res.s}`;
});
function getRatio(ok: StrNumber, no: StrNumber) {
  ok = Number(ok);
  no = Number(no);
  const res = multiply(divide(ok, add(ok, no)), 100);
  return Number.isNaN(res) ? 0 : res;
}
const btnLoading = reactive({
  vote: false,
});
enum Vote {
  OK = 1,
  NO = 2,
}

/** 给删除任务投票
 * @param type 1同意，2不同意
 */
async function vote(type: Vote) {
  btnLoading.vote = true;
  const res = await apiApplyInsuredVote({ id: data.id, type });
  btnLoading.vote = false;
  if (!res) return;
  removeCache("communitygovern");
  router.back();
}
</script>
<template>
  <CpageView>
    <div class="auto-MT-md">
      <Ccard>
        <div class="flex-A-C">
          <BwkLevel :level="data.user.level" />
          <CcopyText class="ML-auto T-S-sm" :copy-text="data.user?.address">
            {{ omitText(data.user?.address) }}
          </CcopyText>
        </div>
        <Ccard bg="var(--C-B3)" class="MT-md PT-xs PB-xs">
          <Ccell border-mode="bottom">
            <div class="C-T3">
              <Cicon name="icon-shijian" color="var(--C-M1)" />
              <span class="T-S-sm ML-xs">{{ $t("shi-jian") }}</span>
            </div>
            <template #right>
              <div>
                {{ dayjs(data.created_at).format("YYYY-MM-DD HH:mm:ss") }}
              </div>
            </template>
          </Ccell>
          <Ccell border-mode="bottom">
            <div class="C-T3">
              <Cicon name="icon-zhuanzhang" color="var(--C-M1)" />
              <span class="T-S-sm ML-xs">
                {{ $t("shen-qing-wkc-shu-liang-0") }}
              </span>
            </div>

            <template #right>
              <div>{{ fixedDecimals(data.money) }}</div>
            </template>
          </Ccell>
          <Ccell v-if="data.txid" border-mode="bottom">
            <div class="C-T3">
              <span class="C-M1">txid</span>
              <span class="T-S-sm ML-xs"> {{ $t("ha-xi") }} </span>
            </div>
            <template #right>
              <CcopyText :copy-text="data.txid">
                {{ omitText(data.txid) }}
              </CcopyText>
            </template>
          </Ccell>
        </Ccard>
      </Ccard>
      <Ccard>
        <VanDivider> {{ $t("shen-qing-shuo-ming") }} </VanDivider>
        <div>{{ data.title }}</div>
        <CimagesPreview class="MT-md" :images="data.images" />
      </Ccard>
      <Ccard>
        <div class="auto-MT-md">
          <h3>{{ $t("zhi-chi-shuai") }}</h3>
          <div class="C-T3">
            <span>{{ $t("tou-piao-ren-shu") }}</span>
            {{ add(Number(data.agree_num), Number(data.disagree_num)) }}
          </div>
          <div class="flex-A-C B-M1-O2 C-M1 PD-xs PL-sm PR-sm MT-sm R-xs">
            <Cicon name="icon-shijian" />
            <div class="ML-xs">{{ $t("daoJiShi") }}</div>
            <div class="ML-auto">
              {{ countdown || $t("yi-jie-shu") }}
            </div>
          </div>
          <div class="PD-md">
            <Rslider
              :model-vlaue="getRatio(data.agree_num, data.disagree_num)"
              readonly
              :min="0"
              :max="100"
              :step="0.01"
              active-color="var(--C-success)"
              inactive-color="var(--C-fail)"
            >
              <template #button="{ value }">
                <CstateTag class="T-nowrap C-white">
                  {{ fixedDecimals(value, 0) }}%
                </CstateTag>
              </template>
            </Rslider>
          </div>
        </div>
      </Ccard>
      <div class="T-A-C" v-if="!countdown">{{ $t("yi-jie-shu") }}</div>
      <div
        v-else-if="data.can_vote == 1"
        class="btnBox flex-J-SE"
        style="gap: var(--gap-md)"
      >
        <Rbutton @click="vote(Vote.NO)" :loading="btnLoading.vote" block round>
          {{ $t("fan-dui") }}
        </Rbutton>
        <Rbutton
          @click="vote(Vote.OK)"
          :loading="btnLoading.vote"
          block
          round
          bg="var(--C-M1)"
        >
          {{ $t("zhi-chi") }}
        </Rbutton>
      </div>
      <div class="T-A-C" v-else>
        {{ $t("nin-wu-xu-tou-piao") }}
      </div>
    </div>
  </CpageView>
</template>
<style lang="scss" scoped></style>
